<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹幕 index.html</title>
  <style>
    .container {
      position: relative;
      width: 856px;
      height: 481px;
    }

    #video {
      position:absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    #canvas {
      position:absolute;
      left: 0px;
      top: 0px;
      z-index: 1;
      /* background-color: red; */
    }

    
  </style>
</head>

<body>
  <h4>弹幕</h4>
  <!-- 视频和画布 -->
  <div class="container">
    <!-- 画布 -->
    <canvas id="canvas" width="856" height="481"></canvas>
    <!-- 视频 -->
    <video id="video" src="res/angrybirds.mp4" controls>你的浏览器版本太低,请升级!</video>
  </div>

  <!-- 用户输入区域 -->
  <div class="userDiv">
    <input type="text" id="inputMsg" placeholder="输入弹幕">
    <select id="inputFont">
      <option value="12px">--请选择--</option>
      <option value="22px">--中号--</option>
      <option value="32px">--大号--</option>
    </select>
    <select id="inputColor">
      <option value="#000">--请选择--</option>
      <option value="#f00">--红色--</option>
      <option value="#00f">--蓝色--</option>
    </select>
    <input type="button" value="发送" id="inputBtn" >
  </div>

  <script src="03_msg.js"></script>
  <script src="03_main.js"></script>
</body>

</html>